<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>树洞社区</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/community.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1654155_pdkxw2wuoy.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script th:src="@{/layui/layui.js}" type="application/javascript"></script>
    <script type="application/javascript">
        window.onload = function () {
            var closable = window.localStorage.getItem("closable");
            if(closable){
                window.close();
                window.localStorage.removeItem("closable");
            }

            //专栏高亮切换
            function changeNavTypeColor(value) {
                $(".tree-column .layui-this").removeClass("layui-this");
                $(".tree-column ul .type"+value).addClass("layui-this");
            }

            function changeNavSortColor(value) {
                $(".tree-sort .layui-this").removeClass("layui-this");
                $(".tree-sort ."+value).addClass("layui-this");
            }
            
            var navType = $(".nav-type").val();
            var navSort = $(".nav-sort").val();
            if(navType == 1){
                changeNavTypeColor(1);
            }else if(navType == 2){
                changeNavTypeColor(2);
            }else if(navType == 3){
                changeNavTypeColor(3);
            }else if(navType == 4){
                changeNavTypeColor(4);
            }else if(navType == 5){
                changeNavTypeColor(5);
            }else if(navType == 6){
                changeNavTypeColor(6);
            }else if(navType == 7){
                changeNavTypeColor(7);
            }

            if(navSort == "hot7"){
                changeNavSortColor('hot7');
            }else if(navSort == "hot30"){
                changeNavSortColor('hot30');
            }else if(navSort == "good"){
                changeNavSortColor('good');
            }else if(navSort == "new"){
                changeNavSortColor('new');
            }else if(navSort == "no"){
                changeNavSortColor('no');
            }
        };

        layui.use('element',function () {
            var element = layui.element;
        });

        function search() {
            layui.use('layer',function () {
                var layer = layui.layer;
                layer.open({
                    type: 1,
                    area:'500px',
                    title: false,
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'tree-layer-search',
                    content: '<form action="/"><input autocomplete="off" placeholder="搜索内容，回车跳转" type="text" name="search"></form>'
                });
            });
        }
    </script>
</head>
<body>
<div th:replace="navigation :: nav"></div>
<div th:replace="navTwo :: navTwo"></div>
<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="tree-panel">
                <div class="tree-panel-title tree-filter">
                    <a>置顶</a>
                    <a href="#signin" class="layui-hide-sm layui-show-xs-block tree-right" style="color: #FF5722;">去签到</a>
                </div>
                <ul class="tree-list">
                    <li th:each="questionTop:${questionTop}">
                        <div>
                            <a th:href="@{'/user/'+${questionTop.user.id}}" class="tree-avatar">
                                <img th:src="${questionTop.user.avatarUrl}">
                            </a>
                            <h2>
                                <a th:class="${questionTop.typeName != '公告'?'layui-badge':'layui-badge layui-bg-green'}" th:text="${questionTop.typeName}" ></a>
                                <a th:href="@{'/question/'+${questionTop.id}}" th:text="${questionTop.title}" th:class="${questionTop.user.grade >= 5?'Highlight':''}"></a>
                                <a class="tree-list-like layui-hide-xs" title="火火火" th:if="${questionTop.viewCount >=100}">
                                    <i class="layui-icon layui-icon-fire" style="font-size: 17px"></i>
                                </a>
                            </h2>
                            <div class="tree-list-info">
                                <a th:href="@{'/user/'+${questionTop.user.id}}">
                                    <cite th:text="${questionTop.user.nickName}"></cite>
                                    <i class="layui-badge tree-badge-vip layui-bg-gray layui-hide-xs" th:text="${'LV'+questionTop.user.grade}"></i>
                                </a>
                                <span th:text="${#dates.format(questionTop.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                                <span class="tree-list-liulan layui-hide-xs" title="浏览">
                                    <i class="iconfont icon-liulan"></i><span th:text="${questionTop.viewCount}"></span>
                                </span>
                                <span class="tree-list-like layui-hide-xs" title="收藏">
                                    <i class="layui-icon layui-icon-star"></i><span th:text="${questionTop.collectionCount}"></span>
                                </span>
                                <span class="tree-list-nums">
                                    <i class="iconfont icon-pinglun1" title="回复"></i><span th:text="${questionTop.commentCount}"></span>
                                </span>
                            </div>
                            <div class="tree-list-badge">
                                <span class="layui-badge layui-bg-orange">置顶</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="tree-panel" style="margin-bottom: 0;">
                <div class="tree-panel-title tree-filter tree-sort">
                    <a href="/" class="layui-this">综合</a>
                    <span class="tree-mid"></span>
                    <a th:href="@{/(sort='hot7',search=${search},tag=${tag},type=${type})}" class="hot7">周榜</a>
                    <span class="tree-mid"></span>
                    <a th:href="@{/(sort='hot30',search=${search},tag=${tag},type=${type})}" class="hot30">月榜</a>
                    <span class="tree-mid"></span>
                    <a th:href="@{/(sort='good',search=${search},tag=${tag},type=${type})}" class="good">精华</a>
                    <span class="tree-filter-right">
                    <a th:href="@{/(sort='new',search=${search},tag=${tag},type=${type})}" class="layui-this layui-hide-xs new">按最新</a>
                    <span class="tree-mid layui-hide-xs"></span>
                    <a th:href="@{/(sort='no',search=${search},tag=${tag},type=${type})}" class=" layui-hide-xs no">抢沙发</a>
                    </span>
                    <input type="text" th:value="${sort}" class="nav-sort layui-hide">
                </div>
                <ul class="tree-list">
                    <li th:each="question:${pagination.data}">
                        <div>
                            <a th:href="@{'/user/'+${question.user.id}}" class="tree-avatar">
                                <img th:src="${question.user.avatarUrl}">
                            </a>
                            <h2>
                                <a th:class="${question.typeName != '公告'?'layui-badge':'layui-badge layui-bg-green'}" th:text="${question.typeName}" ></a>
                                <a th:href="@{'/question/'+${question.id}}" th:text="${question.title}" th:class="${question.user.grade >= 5?'Highlight':''}"></a>
                                <a class="tree-list-like layui-hide-xs" title="火火火" th:if="${question.viewCount >=100}">
                                    <i class="layui-icon layui-icon-fire" style="font-size: 17px"></i>
                                </a>
                            </h2>
                            <div class="tree-list-info">
                                <a th:href="@{'/user/'+${question.user.id}}">
                                    <cite th:text="${question.user.nickName}"></cite>
                                    <i class="layui-badge tree-badge-vip layui-bg-gray layui-hide-xs" th:text="${'LV'+question.user.grade}"></i>
                                </a>
                                <span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                                <span class="tree-list-liulan layui-hide-xs" title="浏览">
                                    <i class="iconfont icon-liulan"></i><span th:text="${question.viewCount}"></span>
                                </span>
                                <span class="tree-list-like layui-hide-xs" title="收藏">
                                    <i class="layui-icon layui-icon-star"></i><span th:text="${question.collectionCount}"></span>
                                </span>
                                <span class="tree-list-nums">
                                    <i class="iconfont icon-pinglun1" title="回复"></i><span th:text="${question.commentCount}"></span>
                                </span>
                            </div>
                            <div class="tree-list-badge" th:if="${question.essence == true}">
                                <span class="layui-badge">精帖</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- 分页展示 -->
                <div style="text-align: center" class="laypage-main" th:if="${pagination.data != null}">
                    <div class="layui-box layui-laypage">
                        <li th:if="${pagination.showFirstPage}" class="first">
                            <a th:if="${pagination.showFirstPage}" th:href="@{/(page=1,search=${search},tag=${tag},type=${type},sort=${sort})}">&lt;&lt;</a>
                        </li>
                        <li th:if="${pagination.showPrevious}" class="prev">
                            <a th:href="@{/(page=${pagination.page-1},search=${search},tag=${tag},type=${type},sort=${sort})}">&lt;</a>
                        </li>
                        <li th:each="page:${pagination.pages}" th:class="${pagination.page==page}?'current_page':''">
                            <a th:href="@{/(page=${page},search=${search},tag=${tag},type=${type},sort=${sort})}" th:text="${page}"></a>
                        </li>
                        <li th:if="${pagination.showNext}" class="next">
                            <a th:href="@{/(page=${pagination.page+1},search=${search},tag=${tag},type=${type},sort=${sort})}">&gt;</a>
                        </li>
                        <li th:if="${pagination.showEndPage}" class="end">
                            <a th:href="@{/(page=${pagination.totalPage},search=${search},tag=${tag},type=${type},sort=${sort})}">&gt;&gt;</a>
                        </li>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <!--热门标签-->
            <div class="tree-panel">
                <div class="tree-panel-title">热门话题</div>
                <ul class="tree-panel-main">
                    <a th:each="tag:${tags}" th:href="@{/(page=1,tag=${tag},sort=${sort})}" th:text="${tag}" class="community-tag"></a>
                </ul>
            </div>
            <div class="tree-panel">
                <div class="tree-panel-title">紫荆华农</div>
                <div class="tree-panel-main">
                    <!--<img src="/images/huanong.png" style="max-width: 100%;"/>-->
                </div>
            </div>
            <!--友情链接-->
            <div class="tree-panel tree-link">
                <h3 class="tree-panel-title">友情链接</h3>
                <dl class="tree-panel-main">
                    <dd><a href="#">树洞社区</a></dd>
<!--                    <dd><a th:href="@{'tencent://Message'(Uin=2435663184,websiteName='local.edu.com:8888=',Menu='yes')}" target="_blank">联系站长</a></dd>-->
<!--                    <dd><a href="https://github.com/shaozihang/community">社区源码</a></dd>-->
<!--                    <dd><a th:href="@{'tencent://Message'(Uin=2435663184,websiteName='local.edu.com:8888=',Menu='yes')}" target="_blank" class="tree-link">申请友链</a></dd>-->
                </dl>
            </div>
        </div>
    </div>
</div>
<div th:replace="footer :: foot"></div>
</body>
</html>